<template>
    <div class="mission-page">
        <divider>{{missionTit}}</divider>
        <swipeout>
            <swipeout-item v-for="mission in unFinshMissionList" transition-mode="follow">
                <div slot="right-menu">
                    <swipeout-button @click.native="finishMission(mission.id)" type="primary">完成</swipeout-button>
                    <swipeout-button @click.native="delayMission(mission.id)" type="default">延时</swipeout-button>
                    <swipeout-button @click.native="deleteMission(mission.id)" type="warn">删除</swipeout-button>
                </div>
                <flexbox class="mision-item" slot="content">
                   <flexbox-item :span="3">{{mission.timelimit}}</flexbox-item>
                   <flexbox-item>{{mission.description}} <span class="mission-tag" v-for="tag in tag(mission.mission)">#{{tag}}</span></flexbox-item>
                   <flexbox-item :span="3"><div><rater :value="mission.star" disabled></rater></div></flexbox-item>
               </flexbox>
           </swipeout-item>
       </swipeout>
       <divider>全部任务</divider>
       <group>
        <cell-box v-for="aMission in AllMissions">
           <flexbox class="mision-item">
               <flexbox-item :span="3">{{aMission.timelimit}}</flexbox-item>
               <flexbox-item :span="2">{{aMission.username}}</flexbox-item>
               <flexbox-item>{{aMission.description}} <span class="mission-tag" v-for="tag in tag(aMission.mission)">#{{tag}}</span></flexbox-item>
           </flexbox>
       </cell-box>
   </group>
</div>
</template>

<script>
    import Vue from 'vue'
    import { AjaxPlugin, Group, Datetime, XInput, XButton, Divider, CellBox, Flexbox, FlexboxItem, Rater, Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
    import Const from '../lib/const.js'
    Vue.use(AjaxPlugin)

    export default {
      name: 'Mission',
      components: {
        Group,
        Datetime,
        XInput,
        XButton,
        Divider,
        CellBox,
        Flexbox,
        FlexboxItem,
        Rater,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton
    },
    data () {
        return {
            newsList: [],
            MissionList: [],
            AllMissions: [],
            endDate: '',
            missionTag: '',
            missionDesc: ''
        };
    },
    computed: {
        missionTit() {
            return this.MissionList.length > 0 ? '个人任务' : '目前还没有任务哦'
        },
        unFinshMissionList() {
            var arr = [];
            this.MissionList.forEach(function(ele){
                if (ele.status !== '已完成') {
                    arr.push(ele);
                }
            })
            return arr;
        }
    },
    methods: {
        load() {
            this.$http.get('https://www.easy-mock.com/mock/59005d8c0e2d1a2d617b9a0a/example/proxy').then(response => {
                this.newsList = response.data.data.news;
            }, response => { // error callback

            });
        },
        tag(mission) {
            return mission.split(',');
        },
        finishMission(id) {
            var qs = require('qs');
            this.$http.post(Const.host + '/api/finishmission',{
                id: id,
                selfcomment: '测试',
            },{
            headers:{
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            }
            }).then(response => {
                console.log(response)
                this.getMission();
                this.getAllMission();
            }, response => {
                alert('finishmission出错了')
            });
        },
        delayMission(id) {
            var qs = require('qs');
            this.$http.post(Const.host + '/api/delaymission',{
                id: id,
                delayreason: '测试延时',
                timelimit: '2017-06-19'
            },{
            headers:{
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            }
            }).then(response => {
                console.log(response)
                this.getMission();
                this.getAllMission();
            }, response => {
                alert('delaymission出错了')
            });
        },
        deleteMission(id) {
            var qs = require('qs');
            this.$http.post(Const.host + '/api/delmission',{
                id: id
            },{
            headers:{
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            }
            }).then(response => {
                console.log(response)
                this.getMission();
                this.getAllMission();
            }, response => {
                alert('delmission出错了')
            });
        },
        getMission() {
            this.$http.get(Const.host + '/api/getmissions',{
                headers:{
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            }).then(response => {
                console.log(response)
                this.MissionList = response.data.data;
            }, response => {
                alert('getmissions出错了')
            });
        },
        getAllMission() {
            this.$http.get(Const.host + '/api/getallmissions',{
                headers:{
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            }).then(response => {
                console.log(response)
                this.AllMissions = response.data.data;
            }, response => {
                alert('getallmissions出错了')
            });
        }
    },
    mounted() {
        this.getMission();
        this.getAllMission();
    }
};
</script>

<style lang="less">
    @import '../assets/fontdpr_set.less';
    .mission-page {

        .vux-cell-box > div {
            width: 100%;
            padding-right: 0;
        }
        .mision-item {
            .font-dpr(12px);
        }
        .mission-tag {
            background: yellow;
            margin-right: 0.078125rem;
            border-radius: 0.078125rem;
            padding: 0.0625rem;
        }
    }

</style>